<template>
  <div>
    <SkyCardPanel title="气泡确认框">
      <div slot="main" class="containter-form">
        <SkyPopConfirm :content="content" :onConfirm="Confirm" :onCancel="Cancel">
          <SkyButton type="primary">删除</SkyButton>
        </SkyPopConfirm>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
            &lt;SkyCardPanel title="气泡确认框"&gt;
              &lt;div slot="main" class="containter-form"&gt;
                &lt;SkyPopConfirm :content="content" :onConfirm="Confirm" :onCancel="Cancel"&gt;
                  &lt;SkyButton type="primary"&gt;删除&lt;/SkyButton&gt;
                &lt;/SkyPopConfirm&gt;
              &lt;/div&gt;
            &lt;/SkyCardPanel&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              export default {
                  data() {
                    return {
                      content: "您确定要删除？？？"
                    };
                  },
                  methods: {
                    Confirm(done) {
                      this.$SkyMessage("确认", "success");
                      done();
                    },
                    Cancel(done) {
                      this.$SkyMessage("取消", "success");
                      done();
                    }
                  }
                };
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "您确定要删除您确定要删除？"
    };
  },
  methods: {
    Confirm(done) {
      this.$SkyMessage("确认", "success");
      done();
    },
    Cancel(done) {
      this.$SkyMessage("取消", "success");
      done();
    }
  }
};
</script>

<style>
</style>